<template>
  <div style="height: 120%; padding: 20px">
    <div class="top">
      <el-button type="primary" icon="el-icon-plus" @click="elDialogShow(true)">添加
      </el-button>
      <el-select v-model="classChoose" placeholder="请选择" style="margin-left: 20px; margin-bottom: 20px">
        <el-option value="全部"></el-option>
        <el-option v-for="(item, index) in classList" :key="index" :label="item.name" :value="item.id">
        </el-option>
      </el-select>
      <el-input placeholder="搜索产品" v-model="selectInput" clearable style="width: 250px; margin: 0 10px 0 20px">
      </el-input>
      <el-button circle icon="el-icon-search" @click="getGoods()"></el-button>
    </div>
    <el-row class="card">
      <el-col v-for="(item, index) in tableData" :key="index" style="padding: 10px;width: 16.66%;">
        <el-card :body-style="{ padding: '0px' }">
          <!-- <img
            :src="'/api/file/downloadGoods?t=' + item.image"
            class="image"
            style="width: 100%; height: 130px; z-index: 100"
          /> -->
          <el-image :src="'/api/file/downloadGoods?t=' + item.image" style="
                width: 100%;
                height: 170px;">
          </el-image>

          <div slot="placeholder" class="image-slot" fit="cover" style="
                width: 100%;
                height: 100%;
                z-index: 100;
                text-align: center;
                color: gray;
              ">
            <div slot="error" class="image-slot">
              <i class="el-icon-picture-outline"></i>
            </div>
          </div>
          <div style="padding: 14px;text-align: left;">
            <span style="font-weight: 600;line-height: 20px;">{{ item.name }}</span>
            <p>NO.{{ item.categoryId }}</p>
            <div class="bottom clearfix">
              <time class="time">{{ item.updateTime }}</time>
              <el-button type="primary " class="button" @click="elDialogShow(false, index)">修改</el-button>
              <el-button type="danger" class="button" @click="deleteGoods(item.id)">删除</el-button>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row>
      <el-pagination background layout="prev, pager, next" :total="total" :page-size="12" style="text-align: center"
        @current-change="onCurrentChange">
      </el-pagination>
    </el-row>
    <el-dialog :title="isAdd ? '添加' : '修改'" :visible.sync="centerDialogVisible" width="60%" center>
      <span>
        <el-form ref="form" :model="form" label-width="80px" :inline="true" class="form">
          <el-form-item label="商品图片">
            <el-upload class="avatar-uploader" action="/api/file/uploadGoods" :show-file-list="false"
              :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload" :drag="true">
              <img key="0" v-if="form.image" :src="'/api/file/downloadGoods?t=' + form.image" class="avatar" />
              <i key="1" v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
          <div class="right">
            <el-form-item label="商品名称">
              <el-input v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item label="商品码">
              <el-input v-model="form.code"></el-input>
            </el-form-item>
            <el-form-item label="分类名称">
              <el-select v-model="form.categoryId" placeholder="请选择分类">
                <el-option v-for="item in classList" :key="item.id" :label="item.name" :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="价格(分)">
              <el-input-number v-model="form.price" :step="1"></el-input-number>
              <p style="color: red;">实际价格￥{{ (form.price/100).toFixed(2) }}</p>
            </el-form-item>
            <el-form-item label="启用状态">
              <el-radio-group v-model="form.status">
                <el-radio :label="0">禁用</el-radio>
                <el-radio :label="1">启用</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="排序">
              <el-input-number v-model="form.sort" :step="1"></el-input-number>
            </el-form-item>
            <el-form-item label="描述">
              <el-input type="textarea" :rows="3" placeholder="请输入内容" v-model="form.description">
              </el-input>
            </el-form-item>
          </div>
        </el-form>
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="change()">
          {{ isAdd ? "添加" : "修改" }}
        </el-button>
      </span>
    </el-dialog>
    <el-dialog title="删除" :visible="deleteVisible" width="30%" center>
      <span>是否删除,NO.{{ deleteId }}</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="deleteVisible = false">取 消</el-button>
        <el-button type="danger" @click="deleteVisible = false">删除</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "CatcoffeeProduct",

  data() {
    return {
      isAdd: true,
      centerDialogVisible: false,
      tableData: [],
      classList: [],
      classChoose: "全部",
      deleteId: "",
      deleteVisible: false,
      form: {},
      image: "",
      selectInput: "",
      total: 0,
    };
  },
  watch: {
    classChoose() {
      this.classChange();
    },
  },
  mounted() {
    this.getClass();
    this.getGoods();
  },
  methods: {
    getClass() {
      this.$store.commit("setIsLoad", true);
      this.$axios.get("/goods/getClassList").then((res) => {
        this.classList = res.data.data;
        console.log(this.classList);
        this.$store.commit("setIsLoad", false);
      });
    },
    getGoods() {
      let select = this.selectInput != "" ? "&name=" + this.selectInput : "";
      this.$store.commit("setIsLoad", true);
      this.$axios
        .get("/goods/select?page=1&pageSize=12" + select)
        .then((res) => {
          this.tableData = res.data.data.records;
          this.total = res.data.data.total;
          this.$store.commit("setIsLoad", false);
        });
    },
    getGoodsByCategory(category) {
      this.$store.commit("setIsLoad", true);
      this.$axios
        .get("/goods/select?page=1&pageSize=12?category=" + category)
        .then(({ data }) => {
          this.tableData = data.data.records;
          this.$store.commit("setIsLoad", false);
        });
    },
    change() {
      this.$store.commit("setIsLoad", true);
      if (this.isAdd) {
        this.$axios.post("/goods/add", this.form).then((res) => {
          this.$store.commit("setIsLoad", false);
          if (res.data.code == 200) {
            this.$notify.success({
              title: "成功",
              message: "创建成功",
            });
            this.centerDialogVisible = false;
          } else {
            this.$notify.error({
              title: "错误",
              message: res.data.msg,
            });
          }
          this.getGoods();
        });
      } else {
        this.$axios.post("/goods/update", this.form).then((res) => {
          if (res.data.code == 200) {
            this.$notify.success({
              title: "成功",
              message: "修改成功",
            });
            this.centerDialogVisible = false;
          } else {
            this.$notify.error({
              title: "错误",
              message: res.data.msg,
            });
          }
          this.$store.commit("setIsLoad", false);
        });
      }
    },
    handleAvatarSuccess(res) {
      this.image = "api" + res.data.filePathName;
      this.form.image = res.data.fileName;
      this.$forceUpdate(); //组件嵌套太深 无法自动更新 强制更新视图
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
    elDialogShow(status, index = 0) {
      this.centerDialogVisible = true;
      this.isAdd = status;
      this.form = {};
      if (!status) {
        this.form = this.tableData[index];
      }
    },
    classChange() {
      this.$store.commit("setIsLoad", true);
      if (this.classChoose != "全部") {
        this.$axios
          .get(
            "/goods/selectByCategory?page=1&pageSize=12&category=" +
            this.classChoose
          )
          .then((res) => {
            this.tableData = res.data.data.records;
            this.$store.commit("setIsLoad", false);
          });
      } else {
        this.$axios
          .get("/goods/selectByCategory?page=1&pageSize=12")
          .then((res) => {
            this.tableData = res.data.data.records;
            this.$store.commit("setIsLoad", false);
          });
      }
    },
    onCurrentChange(page) {
      let select = this.selectInput != "" ? "&name=" + this.selectInput : "";
      this.$store.commit("setIsLoad", true);
      this.$axios
        .get("/goods/select?page=" + page + "&pageSize=12" + select)
        .then((res) => {
          this.tableData = res.data.data.records;
          this.total = res.data.data.total;
          this.$store.commit("setIsLoad", false);
        });
    },
    deleteGoods(id) {
      this.$store.commit("isLoading", true);

      this.$axios.get("/goods/delete?id=" + id).then((res) => {
        if (res.data.code == 200) {
          this.$notify.success({
            title: "成功",
            message: "删除成功",
          });
        } else {
          this.$notify.error({
            title: "错误",
            message: res.data.msg,
          });
        }
        this.$store.commit("isLoading", false);
        this.getGoods();
      });
    },
  },
};
</script>

<style scoped>
.form {
  display: flex;
  flex-wrap: wrap;
}

.form .right {
  width: 70%;
}

.form .el-form-item {
  width: 200px;
}

::v-deep .el-form-item__label {
  text-align: left;
}

.time {
  display: block;
  font-size: 13px;
  color: #999;
  margin-bottom: 10px;
  text-align: left;
}

.card {
  display: flex;
  flex-wrap: wrap;
}

.card p {
  color: #999;
  font-size: 13px;
  margin-top: 10px;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
  text-align: center;
}

.button {
  margin: 5px;
  width: 40%;
  text-align: center;
}

.image {
  width: 100%;
  display: block;
}

.image img {
  width: 100%;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}

::v-deep .avatar-uploader .el-upload .el-upload-dragger {
  width: 178px;
  height: 178px;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>